<template>
  <div class="app-container">
    <div class="instance-edit-container">
      <div class="base-info">
        <el-image :src="iconSrc" fit="contain">
          <div slot="error" class="image-slot">
            <el-image :src="noimg" fit="contain" />
          </div>
        </el-image>
        <div><span class="el-form-item__label">名称：</span><span style="line-height: 40px;">{{ instance.name }}</span></div>
        <div><span class="el-form-item__label">唯一标识:</span><span style="line-height: 40px;">{{ instance.code }}</span></div>
        <div><span class="el-form-item__label">所属模型:</span><router-link :to="'/cmdb/schemas/' + instance.schemadef._id" class="el-button el-button--text el-button">{{ instance.schemadef.name }}</router-link></div>
      </div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="拓扑" name="first">
          <topo v-if="activeName === 'first'" :instance-id="instanceId" />
        </el-tab-pane>
        <el-tab-pane label="属性" name="second" style="padding: 10px 20px;">
          <attr-form v-if="activeName === 'second'" :instance-id="instanceId" />
        </el-tab-pane>
        <el-tab-pane label="关系" name="thrid">
          <relation v-if="activeName === 'thrid'" :instance-id="instanceId" />
        </el-tab-pane>
        <el-tab-pane label="变更" name="forth">
          <div class="block versions-tab">
            <el-timeline>
              <el-timeline-item v-for="version in versions" :key="version.updated" :timestamp="utc2local(version.updated)" placement="top">
                <modify-desc :diffs="version.diffs" />
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-tab-pane>

      </el-tabs>
    </div>
  </div>
</template>

<script>
import { detail as instanceDetail } from '@neu/cmdb-ui/api/instance'
import { getIcon } from '@neu/cmdb-ui/api/schema'
import { deepClone } from '@neu/biz-core/utils'
import moment from 'moment'
import AttrForm from './attrForm'
import Relation from './relation'
import Topo from './topo'
import ModifyDesc from './modifyDesc'
const noimg = require('@neu/cmdb-ui/assets/images/noimg.png')

export default {
  name: 'CmdbInstanceEdit',
  components: {
    ModifyDesc,
    Relation,
    Topo,
    AttrForm
  },
  data() {
    return {
      instanceId: '',
      instance: {
        name: '',
        schemadef: {
          _id: '',
          name: ''
        },
        attrs: {},
        versions: []
      },
      activeName: 'first',
      iconSrc: '',
      noimg
    }
  },
  computed: {
    versions() {
      const versions = deepClone(this.instance.versions) || []
      return versions.reverse()
    }
  },
  created() {
    this.instanceId = this.$route.params.id
    this.fetch()
  },
  methods: {
    // 获取实例详情
    fetch: function() {
      instanceDetail(this.instanceId).then(response => {
        this.instance = response.data
      })
    },

    // utc时间转本地时间
    utc2local(utc) {
      return moment(utc).format('YY-MM-DD HH:mm')
    },

    // 获取模型图标
    getIcon(schemaId) {
      getIcon(schemaId).then(response => {
        if (response.data && response.data.url) {
          this.iconSrc = response.data.url
        }
      })
    }
  }
}
</script>

<style lang="scss">

.instance-edit-container {
   background-color: #ffffff;
   padding: 3px 20px;

  .base-info {
    display: flex;
    align-items: center;
    padding: 3px 20px;
    background-color: #ffffff;
    .el-image {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      margin-right: 20px;
    }
    div {
      margin-right: 20px;
    }
  }

  .versions-tab {
    min-height: calc(100vh - 180px);
  }
}
</style>
